<template>
<!--  <el-button type="success">回到首页</el-button>-->
  <div style="margin-top: 20px;" >
    送水工名称：<el-input style="width: 15%" v-model="waterManForm.name" clearable placeholder="请输入送水工名称" />
    &nbsp;<el-button type="primary" @click="query">搜索</el-button>
  </div>
  <br/>
  <el-table
      :data="waterManData"
      border
      style="width: 100%"
  >
    <el-table-column prop="name" label="送水工名称" width="180" />
    <el-table-column label="送水工照片" width="180">
      <template #default="scope">
        <el-image :src="scope.row.image" style="width: 50px;height: 50px"/>
      </template>
    </el-table-column>
    <el-table-column label="客户列表" width="230">
      <template #default="scope">
        <font v-for="item in scope.row.clients">
          {{item.name}}&nbsp;
        </font>
      </template>
    </el-table-column>
    <el-table-column label="客户地址" width="230">
      <template #default="scope">
        <font v-for="item in scope.row.clients">
          {{item.address}}&nbsp;
        </font>
      </template>
    </el-table-column>
    <el-table-column prop="count" label="送水数量" width="180" />
  </el-table>
  <p style="text-align: center;font-size: 15px">当前第<font color="red">{{waterManForm.pageNum}}</font>页 共<font color="red">{{waterManForm.pages}}</font>页 一共<font color="red">{{waterManForm.total}}</font>条记录</p>
  <br/>
  <el-pagination
      style="position: absolute;right: 25%"
      v-model:current-page="waterManForm.pageNum"
      v-model:page-size="waterManForm.pageSize"
      :page-sizes="[5, 10, 20, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="waterManForm.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />
</template>
<script setup>
  import {ref,reactive,onMounted} from "vue";
  import request from "@/api/request";
  import router from "@/router";
  import {ElMessage,ElMessageBox} from "element-plus";

  const waterManForm = reactive({
    name:'',
    pageNum:1,
    pageSize:5,
    pages:0,
    total:0
  })
  const waterManData = ref([]);
  const query = () => {
    request.get('/watermans/getwatermancount',{
      params:{
        name:waterManForm.name,
        pageNum:waterManForm.pageNum,
        pageSize:waterManForm.pageSize
      }
    }).then(resp=>{
      if(resp) {
        waterManData.value = resp.data.records;
        waterManForm.pages = resp.data.pages;
        waterManForm.total = resp.data.total;
      }
    })
  }
  const handleSizeChange = (val) => {
    waterManForm.pageSize = val;
    query();
  }
  const handleCurrentChange = (val) => {
    waterManForm.pageNum = val;
    query();
  }

  onMounted(()=>{
    query();
  })
</script>